/* Copyright (c) 2017 The Chromium Authors. All rights reserved.
   Use of this source code is governed by a BSD-style license that can be
   found in the LICENSE file.*/

#spinner {
  animation: container-rotate 1568ms linear infinite;
  height: 100%;
  width: 100%;
}

#spinner:after {
  position: absolute;
  content: ' ';
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
}

#spinner:before {
  position: absolute;
  content: ' ';
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: 100%;
}

#layer {
  width: 100%;
  height: 100%;
  white-space: nowrap;
  animation-name: fill-unfill-rotate;
  animation-duration: 5332ms;
  animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
  animation-iteration-count: infinite;
}

#spinner-mask-1,
#spinner-mask-2 {
  position: absolute;
  width: 100%;
  height: 200%;
  top: -50%;
  overflow: hidden;
}

#spinner-mask-1 {
  left: -50%;
}

#spinner-mask-2 {
  right: -50%;
}

div[pseudo="-internal-media-controls-loading-panel-spinner-mask-1-background"],
div[pseudo="-internal-media-controls-loading-panel-spinner-mask-2-background"] {
  position: absolute;
  background-repeat: no-repeat;
  width: 200%;
  height: 100%;
  top: 0;
  animation-duration: 1333ms;
  animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

div[pseudo="-internal-media-controls-loading-panel-spinner-mask-1-background"] {
  animation-name: mask-1-spin;
}

div[pseudo="-internal-media-controls-loading-panel-spinner-mask-2-background"] {
  animation-name: mask-2-spin;
}

@keyframes container-rotate {
  to { transform: rotate(360deg) }
}

@keyframes fill-unfill-rotate {
  12.5% { transform: rotate(135deg) }
  25%   { transform: rotate(270deg) }
  37.5% { transform: rotate(405deg) }
  50%   { transform: rotate(540deg) }
  62.5% { transform: rotate(675deg) }
  75%   { transform: rotate(810deg) }
  87.5% { transform: rotate(945deg) }
  to    { transform: rotate(1080deg) }
}

@keyframes mask-1-spin {
  0% { transform: rotate(157deg) }
  50% { transform: rotate(30deg) }
  to { transform: rotate(157deg) }
}

@keyframes mask-2-spin {
  0% { transform: rotate(-155deg) }
  50% { transform: rotate(-30deg) }
  to { transform: rotate(-155deg) }
}
